<div class="blade-static __bottom" ng-include="'$(Platform)/Scripts/common/templates/create.tpl.html'" ng-if="blade.isNew"></div>
<div class="blade-content">
    <div class="blade-inner">
        <div class="inner-block">
            <form name="formScope" class="form">
                <div ng-init="setForm(formScope)">
                    <label class="form-label" for="">{{ 'platform.blades.dynamicProperty-detail.labels.property-name' | translate }}</label>
                    <div class="form-input">
                        <input focus-on="" required ng-model="blade.currentEntity.name" placeholder="{{ 'platform.genericValueInput.placeholders.short-text' | translate}}" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="">{{ 'platform.blades.dynamicProperty-detail.labels.display-name' | translate }}</label>
                    <div class="form-input __langs" ng-repeat="data in blade.currentEntity.displayNames | limitTo: blade.showAllLanguages ? blade.currentEntity.displayNames.length : 2">
                        <label class="lang-code">{{data.locale}}</label>
                        <input ng-model="data.name" placeholder="{{ 'platform.blades.dynamicProperty-detail.placeholders.display-name' | translate }}" />
                    </div>
                    <div ng-if="blade.currentEntity.displayNames.length > 2">
                        <a href="" ng-click="blade.showAllLanguages = !blade.showAllLanguages">
                          {{ (blade.showAllLanguages ? 'platform.blades.dynamicProperty-detail.labels.show-less-languages' : 'platform.blades.dynamicProperty-detail.labels.show-more-languages' ) | translate }}
                        </a>
                    </div>
                </div>
                <div class="columns clearfix">
                    <div class="column">
                        <div class="columns">
                            <div class="column">
                                <div class="form-group">
                                    <label class="form-label">{{ 'platform.blades.dynamicProperty-detail.labels.required' | translate }}</label>
                                    <div class="form-input">
                                        <label class="form-label __switch">
                                            <input type="checkbox" ng-model="blade.currentEntity.isRequired">
                                            <span class="switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="column">
                                <div class="form-group" ng-class="{'__disabled': !blade.isNew || !blade.hasMultivalue}">
                                    <label class="form-label">{{ 'platform.blades.dynamicProperty-detail.labels.multivalue' | translate }}</label>
                                    <div class="form-input">
                                        <label class="form-label __switch">
                                            <input type="checkbox"
                                                   ng-model="blade.currentEntity.isArray"
                                                   ng-disabled="!blade.hasMultivalue"
                                                   ui-validate=" 'arrayFlagValidator($value)' "
                                                   ui-validate-watch=" 'blade.currentEntity.valueType' "
                                                   name="arrayFlag">
                                            <span class="switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="columns">
                            <div class="column">
                                <div class="form-group" ng-class="{'__disabled': !blade.isNew || !blade.hasMultilanguage}">
                                    <label class="form-label">{{ 'platform.blades.dynamicProperty-detail.labels.multilingual' | translate }}</label>
                                    <div class="form-input">
                                        <label class="form-label __switch">
                                            <input type="checkbox"
                                                   ng-model="blade.currentEntity.isMultilingual"
                                                   ng-disabled="!blade.hasMultilanguage"
                                                   ui-validate=" 'multilingualFlagValidator($value)' "
                                                   ui-validate-watch=" 'blade.currentEntity.valueType' "
                                                   name="multilingualFlag">
                                            <span class="switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="column">
                                <div class="form-group" ng-class="{'__disabled': !blade.isNew || !blade.hasDictionary}">
                                    <label class="form-label">{{ 'platform.blades.dynamicProperty-detail.labels.dictionary' | translate }}</label>
                                    <div class="form-input">
                                        <label class="form-label __switch">
                                            <input type="checkbox"
                                                   ng-model="blade.currentEntity.isDictionary"
                                                   ng-disabled="!blade.hasDictionary"
                                                   ui-validate=" 'dictionaryFlagValidator($value)' "
                                                   ui-validate-watch=" 'blade.currentEntity.valueType' "
                                                   name="dictFlag">
                                            <span class="switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="error" ng-if="formScope.arrayFlag.$invalid">{{ 'platform.blades.dynamicProperty-detail.validations.multivalue' | translate }}</div>
                <div class="error" ng-if="formScope.multilingualFlag.$invalid">{{ 'platform.blades.dynamicProperty-detail.validations.multilingual' | translate }}</div>
                <div class="error" ng-if="formScope.dictFlag.$invalid">{{ 'platform.blades.dynamicProperty-detail.validations.dictionary' | translate }}</div>

                <div class="form-group">
                    <label class="form-label">{{ 'platform.blades.dynamicProperty-detail.labels.value-type' | translate }}</label>
                    <div class="form-input">
                        <ui-select ng-model="blade.currentEntity.valueType" ng-disabled="!blade.isNew">
                            <ui-select-match>{{ $select.selected.title }}</ui-select-match>
                            <ui-select-choices repeat="x.valueType as x in blade.valueTypes | translateArray:['title', 'description'] | filter: $select.search">
                                <div class="__items">
                                    <span class="list-t">{{ x.title }}</span>
                                    <span class="list-descr">{{ x.description }}</span>
                                </div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="">{{ 'platform.blades.dynamicProperty-detail.labels.display-order' | translate }}</label>
                    <div class="form-input">
                        <input class="form-input" num-type="integer" type="number" ng-min="0" min="0" ng-model="blade.currentEntity.displayOrder" placeholder="{{ 'platform.blades.dynamicProperty-detail.placeholders.display-order' | translate}}" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="">{{ 'platform.blades.dynamicProperty-detail.labels.description' | translate }}</label>
                    <div class="form-input">
                        <input ng-model="blade.currentEntity.description" placeholder="{{ 'platform.blades.dynamicProperty-detail.placeholders.description' | translate}}" />
                    </div>
                </div>

            </form>

            <ul class="list __items">
                <li class="list-item" ng-class="{'__selected': currentChild === 'dict', '__disabled': !blade.currentEntity.isDictionary}" ng-click='openChild("dict")'>
                    <span class="list-t">{{ 'platform.blades.dynamicProperty-detail.labels.dictionary-values' | translate }}</span>
                    <span class="list-descr" ng-if="blade.currentEntity.isDictionary">{{ 'platform.blades.dynamicProperty-detail.labels.manage-dictionary' | translate }}</span>
                </li>
            </ul>
        </div>
    </div>
</div>
